<template>
  <div class="register">
    <div class="video-box">
      <video id="myVideo" class="video-js video-background" :Autoplay="true" :loop="true" Controls muted>
        <source :src="this.BASE_URL + 'getMovie'" type="video/mp4" />
      </video>
      <van-overlay :show="true">
        <div class="wrapper" @click.stop>
          <div class="forms">
            <van-tabs v-model="active" :background="color" :title-inactive-color="fontcolor" :title-active-color="activecolor" :color="activecolor" swipeable line-width="80px">
              <van-tab title="手机号注册">
                <van-form @submit="onSubmit" class="van_form">
                  <van-field class="form" v-model="phone" name="phone" label-width="50px" label="手机号" placeholder="手机号">
                    <template #button>
                      <van-button size="small" type="info" style="border-radius: 20px">发送验证码</van-button>
                    </template>
                  </van-field>
                  <van-field class="form" v-model="vCode" type="password" label-width="50px" name="vCode" label="验证码" placeholder="验证码" />
                  <div style="margin: 16px; text-align: center">
                    <van-button class="btn" round block type="info" native-type="submit">登录</van-button>
                    <div style="margin-top: 10px">
                      <van-radio-group v-model="radio">
                        <van-radio name="1" shape="square" icon-size="15">
                          <span style="color: white"> 我已阅读<router-link style="color: white" to="">《用户协议》</router-link>并同意协议 </span>
                        </van-radio>
                      </van-radio-group>
                    </div>
                  </div>
                </van-form>
              </van-tab>
              <van-tab title="账号注册">
                <van-form @submit="onSubmit" class="van_form">
                  <van-field class="form" v-model="nickname" name="昵称" label="昵称" placeholder="昵称" />
                  <van-field class="form" v-model="username" name="用户名" label="用户名" placeholder="用户名" />
                  <van-field class="form" v-model="password" type="password" name="密码" label="密码" placeholder="密码" />

                  <div style="margin: 16px; text-align: center">
                    <p style="margin-bottom: 7px; color: white">
                      已有账号？
                      <router-link style="color: #888" to="/login">前去登录</router-link>
                    </p>
                    <van-button class="btn" round block type="info" native-type="submit">注册</van-button>
                  </div>
                </van-form>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import { register } from '../http/api'
import qs from 'qs'
import { Notify } from 'vant'
import { BASE_URL } from '../http/http'

export default {
  name: 'Register',
  data() {
    return {
      BASE_URL: BASE_URL,
      nickname: '',
      username: '',
      password: '',
      active: '手机号登录',
      color: 'transparent',
      fontcolor: 'white',
      activecolor: 'white',
      phone: '',
      vCode: '',
      radio: ''
    }
  },
  methods: {
    onSubmit() {
      let data = {
        nickname: this.nickname,
        username: this.username,
        password: this.password
      }
      register(qs.stringify(data)).then((res) => {
        if (res.status === 200) {
          Notify({ color: 'white', background: '#bababa', type: 'success', message: res.msg, duration: 1000 })
          this.$router.push('/login')
        } else Notify({ color: 'white', background: '#1ca596', type: 'warning', message: res.msg })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.register {
  position: absolute;
  /*display: flex;*/
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.form {
  /* border: 2px solid black; */
  border-radius: 20px;
  width: 300px;
  margin: 7px auto;
  background: none;
  background-color: rgba(235, 230, 230, 0.1);
}
.btn {
  width: 180px;
  margin: 0 auto;
}
.video-box {
  position: relative;
  height: 100vh;
  background-color: #c1cff7;
  /*进行视频裁剪*/
  overflow: hidden;
}
.video-box > .forms {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-box .video-background {
  position: absolute;
  left: 50%;
  top: 50%;
  /*保证视频内容始终居中*/
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /*保证视频充满屏幕*/
  object-fit: cover;
  min-height: 800px;
}
/deep/.van-field__control,
/deep/.van-cell__title {
  // color: rgb(2, 49, 26);
  color: rgba(253, 251, 251, 0.7);
}
</style>
